<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%
	String userId = (String) session.getAttribute("userID");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>PhotoShare</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js" ></script>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script type="text/JavaScript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/JavaScript" src="js/slimbox2.js"></script>
<script type="text/JavaScript" src="js/showhide.js"></script> 
<script type="text/JavaScript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#da-vinci-carousel").CloudCarousel(		
		{			
			reflHeight: 56,
			reflGap:2,
			titleBox: $('#da-vinci-title'),
			altBox: $('#da-vinci-alt'),
			buttonLeft: $('#but1'),
			buttonRight: $('#but2'),
			yRadius:40,
			xPos: 285,
			yPos: 120,
			speed:0.15,
			mouseWheel:true
		}
	);
	
	// get Albums	
	$.ajax({
		type: "POST",
		url: "userAlbums.action",
		dataType: "json",
		data: "userId="+$('#userId').val(),
		success: function (data) {
			if (data.albumList.length > 0) {
				document.getElementById('album').innerHTML = '';
				for (var i = 0; i < data.albumList.length; i++) {				
					document.getElementById('album').innerHTML+='<input type="radio" name="albumRadioBtn" class="noindent" value="'+data.albumList[i].albumName+'"><label style="color:#ffffff;">'+data.albumList[i].albumName+'</label><br>';
				}

		    	$("input[name='albumRadioBtn']:radio").click(function() {
		        	rdoVal = $("input[name='albumRadioBtn']:radio:checked").val();		        	
		        	$("#albumName").val(rdoVal);
		        	//alert($("#albumName").val() + 'in click');
		        	$.ajax({
		        		type: "POST",
		        		url: "userPhotos.action",		        		
		        		dataType: "json",
		        		data: "userId="+$('#userId').val()+"&albumName="+$("#albumName").val(),
		        		success: function (data1) {
		        			
		        			if (data1.photoList.length > 0) {		        				
		        				//document.getElementById('photos').innerHTML = '';
		        				var newHTML = '';
		        				for (var j = 0; j < data1.photoList.length; j++) {		        					
		        					 newHTML += '<a href="images/' + data1.photoList[j].albumLoc + '/' + data1.photoList[j].photoName + '" title="' + data1.photoList[j].photoTitle +
		        						'"><img class="cloudcarousel" src="images/' + data1.photoList[j].albumLoc + '/' + data1.photoList[j].photoName + '" width="128" height="164" style="position: absolute; left: 221px; top: 160px; z-index: 100;">'+
		        						'<canvas class="reflection" style="position: absolute; left: 221px; top: 326px; width: 128px; height: 56px;" width="128" height="56"></canvas></a>';
		        					 newHTML += '\n';
		        				}	
 
		        	 			newHTML += '<div id="da-vinci-title" style="color:#8cca1e;display: block; ">Desert</div>';
		        	 			newHTML += '<div id="but1" class="carouselLeft" style="position: absolute; top: 20px; right: 64px; display: inline;"></div>';
		        	 			newHTML += '<div id="but2" class="carouselRight" style="position: absolute; top: 20px; right: 20px; display: inline;"></div>';		        	 					        				
		        			}
		        			document.getElementById('photos').innerHTML = newHTML;
		        			//alert(document.getElementById('photos').innerHTML);
		        			$("#da-vinci-carousel").CloudCarousel(		
		        					{			
		        						reflHeight: 56,
		        						reflGap:2,
		        						titleBox: $('#da-vinci-title'),
		        						altBox: $('#da-vinci-alt'),
		        						buttonLeft: $('#but1'),
		        						buttonRight: $('#but2'),
		        						yRadius:40,
		        						xPos: 285,
		        						yPos: 120,
		        						speed:0.15,
		        						mouseWheel:true
		        					}
		        				);		        			
		        		}
		        	});
		    	});			
				if (data.albumList.length > 0) {
					/*
					$('input:radio[name="albumRadioBtn"]').filter('[value="'+data.albumList[0].albumName+'"]').attr('checked', true);
		        	$.ajax({
		        		type: "POST",
		        		url: "userPhotos.action",		        		
		        		dataType: "json",
		        		data: "userId="+$('#userId').val()+"&albumName="+data.albumList[0].albumName,
		        		success: function (data2) {
		        			// successful
		        		}
		        	});	
		        	*/
					//$('input:radio[name="albumRadioBtn"]').filter('[value="'+data.albumList[0].albumName+'"]').bind('click', function() {
						//$('input:radio[name="albumRadioBtn"]').filter('[value="'+data.albumList[0].albumName+'"]').trigger('click');
						
					//});					
				}		    	
//				alert(data.albumList[0].albumName);
//				var result = data.albumLoc;
			}						
		}
	});
	
    // bind 'myForm' and provide a simple callback function 
    $('#uploadForm').ajaxForm(function() { 
        alert("Image upload completed!"); 
    }); 	
    
    $('#saveBtn').click(function(e) {
    	rdoVal = $("input[name='albumRadioBtn']:radio:checked").val();
    	if (rdoVal == null) 
    	{
    		alert("Please select an album");
    	}
    	else {
    		$('#imageTitle').val($('#imgTitle').val());
    		$('#imageDesc').val($('#imgDesc').val());
    		$('#uploadForm').submit();
    	}
    	
    });
    
    $('#albumNew').click(function(e) {
    	alert('here');
    });
    $('#albumDelete').click(function(e) {
    	alert('here');
    });
    $('#albumUpdate').click(function(e) {
    	alert('here');
    });    
 	// calling ajax to get photos
    //$("#saveBtn").click(function() {    	
//    	$("input[name='albumRadioBtn']:radio").click(function() {
//        	rdoVal = $("input[name='albumRadioBtn']:radio:checked").val();
//        	$("#albumName").val(rdoVal); 
//    	});

    	//document.forms["uploadForm"].submit();
    //});
    //
});

function test() {
	alert('test');
}

</script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/widget76.css" type="text/css" media="screen"> 

<style type="text/css">
body
{
   background-color: transparent;
   color: #000000;
   background: #1c1d1f;
}
</style>
<style type="text/css">
a
{
   color: #C8D7EB;
   outline: none;
   text-decoration: none;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: none;
}
#container {	
	width:800px;	
	margin-left:auto;
	margin-right:auto;
	/*background-color:#fff;*/			
}
#banner {	
	background-repeat:no-repeat;
	height:105px;	
	position:relative;
	z-index:10;	
}
#bannertext {
	display:none;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	position:absolute;
	left:256px;
	top:60px;
	color:#f90;
	font-family:Tahoma, Geneva, sans-serif;
}
#logo {
	position:absolute;
	display:inline-block;	
	left:20px;
	top:0px;
	width:256px;
	height:56px;
	border:none;	
	cursor:pointer;
	float:left;
	z-index:11;
}
/* General */
#cssdropdown { 
	position:absolute;	
	top:6px;
	left:330px;
	z-index:10000;
	background:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing:0px;
	font-size:12px;
	
}
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0;  }

/* Head links */
#cssdropdown li.headlink { float: left; width:auto; display:block;  }
#cssdropdown li.headlink a { display:block; color:#fff; padding: 4px; padding-bottom:10px; text-decoration:none; padding-right:20px;}
#cssdropdown li.headlink a:hover { color:#fff;}

/* Child lists and links */
/* the abs position allows the drop down to have its own width without affecting the tab widths */
#cssdropdown li.headlink ul { display: none;  text-align: left; position:absolute; width:174px;} /* this is the image width */
#cssdropdown li.headlink:hover ul { display: block; }
/* Links within the menu */
#cssdropdown li.headlink ul li a {
	padding: 5px 10px 3px 10px; 
	margin:0px; color:#fff; 
	text-decoration:none; 
	width:156px; /* this is the space available for text */
	font-weight:normal;
	font-size:12px;
	font-weight:bold;
	text-transform:none;
}
#cssdropdown li.headlink ul li a:hover { text-decoration:none;background-color:#cc6600;width:146px;}
/* Pretty styling */	
/*#cssdropdown a { color: black; }*/
#cssdropdown ul li a:hover { text-decoration: none; }	
/* The drop down menu itself. */
/*
#cssdropdown li.headlink ul { z-index:10000;
background-image: url(/images/dropmenu.png);
background-position: bottom;
padding-bottom: 15px;
background-repeat:no-repeat;

}
*/	
.enclosedBox {
    border-top: solid 1px #666666;
    border-right: solid 1px #2d2d2d;
    border-left: solid 1px #2d2d2d;
    border-bottom: solid 1px #2d2d2d;
    /* Changed by Mike */
    /*background: transparent url(http://cdn.smugmug.com/img/gradients/medium_black.gif) repeat-x;*/
    background:#000000;
}	

.box {
    background-color: transparent;
}
.boxTop {
    border-bottom: solid 1px #666666;
}
.boxBottom {
    background: transparent url(images/medium_black.gif) repeat-x;
  	border-right: solid 1px #2d2d2d;
    border-left: solid 1px #2d2d2d;
    border-bottom: solid 1px #2d2d2d;
}
.browse .leftColumn, #communityHome .leftColumn, .pricing .leftColumn, .news .leftColumn {
    width: 570px;
    float: left;
    display: inline;
}
.browse .rightColumn, #communityHome .rightColumn, .pricing .rightColumn, .news .rightColumn {
    width: 210px;
    padding-left: 20px;
    float: left;
    display: inline;
}
/*
.leftColumn {
    display: inline;
    float: left;
    width: 570px;
}
.rightColumn {
    display: inline;
    float: left;
    width: 345px;
    padding-left: 10px;
}
*/
.notopmargin {
    margin-top: 0 !important;
}
ul,ol {
    margin: 0 0 10px 0;
    padding: 10px 0 0 30px;
}

ul.noindent, ol.noindent {
    padding-left: 20px;
}

.carouselLeft {	
	display:none;
	background:url(images/rotate-left.png);	
	width:40px; height:40px;
	background-position: 0px 0px;
}
.carouselLeft:hover {		
	width:40px; height:40px;
	background-position: 0px 40px;
	cursor:auto;
}
.carouselRight {
	display:none;
	background:url(images/rotate-right.png);	
	width:40px; height:40px;
	background-position: 0px 0px;
}
.carouselRight:hover {	
	width:40px; height:40px;
	background-position: 0px 40px;
}

.spacer {
    clear: both;
}
</style>

<style type="text/css">

</style>
</head>
<body>
<input type="hidden" name="userId" id="userId" value=<%= userId %>>
<div id='container'>
	<div id='banner'>
		<a id="logo" href="#">
		<span style="color:#FFFFFF;font-family:'Arial, Helvetica, sans-serif';font-size:27px;"><strong>PhotoShare</strong></span>
		</a>   		
	    <ul id="cssdropdown">        
	        <li class="headlink"><a href="#">Home</a></li>            
	        <li class="headlink">
	         <a href="#">My Account</a>
	         <!-- 	                   
	         <ul>          
	          <li><a href="/mainsite/carousel.htm">New Album</a></li>
	          <li><a href="/mainsite/lens-flare.htm">Delete Album</a></li>
	          <li><a href="/mainsite/lens-flare.htm">Update Album</a></li>
	          <li><a href="/mainsite/cloud-zoom.htm">Delete Image</a></li>                     
	         </ul>	   
	         -->      
	         </li>             
			  <li class="headlink"><a href="#">About</a></li>  
	          <li class="headlink"><a href="#">Contact</a></li>    
	    </ul>
	</div>
	
	<div class="browse">
	<div class="leftColumn">
	<div class="box">
	<div id="da-vinci-carousel" class="boxBottom" style="width: 570px; height: 384px;  
		background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; position: relative; 
		overflow-x: hidden; overflow-y: hidden; background-position: initial initial; background-repeat: initial initial; ">
		<div style="position: absolute; width: 100%; height: 100%; display: block;" id="photos">   
	            <a href="images/Desert.jpg" rel="lightbox" title="Desert">
		            <img class="cloudcarousel" src="images/Desert.jpg" width="128" height="164" alt="Desert" 
		            title="Desert" style="position: absolute; left: 221px; top: 160px; z-index: 100; ">
		            <canvas class="reflection" style="position: absolute; left: 221px; top: 326px; width: 128px; height: 56px; " 
		            width="128" height="56" title="Desert"></canvas>
	            </a>
				<a href="images/Jellyfish.jpg" rel="lightbox" title="Jellyfish">
		            <img class="cloudcarousel" src="images/Jellyfish.jpg" width="128" height="164" alt="Jellyfish" 
		            title="Jellyfish" style="position: absolute; left: 221px; top: 160px; z-index: 100; ">
		            <canvas class="reflection" style="position: absolute; left: 221px; top: 326px; width: 128px; height: 56px; " 
		            width="128" height="56" title="Jellyfish"></canvas>
	            </a>            
	            <a href="images/Koala.jpg" rel="lightbox" title="Koala">
		            <img class="cloudcarousel" src="images/Koala.jpg" width="128" height="164" alt="Koala" 
		            title="Koala" style="position: absolute; left: 221px; top: 160px; z-index: 100; ">
		            <canvas class="reflection" style="position: absolute; left: 221px; top: 326px; width: 128px; height: 56px; " 
		            width="128" height="56" title="Koala"></canvas>
	            </a> 	
	            <a href="images/Tulips.jpg" rel="lightbox" title="Koala">
		            <img class="cloudcarousel" src="images/Tulips.jpg" width="128" height="164" alt="Tulips" 
		            title="Tulips" style="position: absolute; left: 221px; top: 160px; z-index: 100; ">
		            <canvas class="reflection" style="position: absolute; left: 221px; top: 326px; width: 128px; height: 56px; " 
		            width="128" height="56" title="Tulips"></canvas>
	            </a>
	                      
	            <div id="da-vinci-title" style="color:#8cca1e;display: block; ">Desert</div>  
	            <!--                      
	      		<div id="da-vinci-alt" style="color:#8cca1e;display: block; ">Desert alt</div>
	 -->
				<div id="but1" class="carouselLeft" style="position: absolute; top: 20px; right: 64px; display: inline; "></div>
	 			<div id="but2" class="carouselRight" style="position: absolute; top: 20px; right: 20px; display: inline; "></div> 
	 	</div>
	</div>  
	</div>

	<!-- buttom -->
	<br>
	<div class="box">		
		<label style="color:#8cca1e;font-weight:bold;">Title:</label>
		<input type="text" name="imgTitle" id="imgTitle" size="84">

	</div>
	<br>
	<div class="box">
		<label style="color:#8cca1e;font-weight:bold;">Description:</label>
		<br>
		<textarea rows="5" cols="67" name="imgDesc" id="imgDesc"></textarea>
		<div align="right">
		<input type="button" id="saveBtn" value="Save" >
		<input type="button" id="deleteBtn" value="Delete">
		</div>
	</div>
	</div>
	<div class="rightColumn">
	<div class="box">
		<div class="boxTop">
			<label style="color:#8cca1e;font-weight:bold;">Select Image</label>
			<div class="spacer"></div>
		</div>
		<div class="boxBottom">	 
			<form id="uploadForm" action="upload.action" method="POST" enctype="multipart/form-data">
				<input type="file" size="15" name="userImage" style="color:#000000">				
				<input type="hidden" id="albumName" name="albumName">
				<input type="hidden" id="imageTitle" name="imageTitle">
				<input type="hidden" id="imageDesc" name="imageDesc">				
				<!-- 
				<input type="submit" id="submitBtn" value="Upload">
				 -->
			</form>
		</div>	
	</div>
	<br>
		<div class="box">
		<div class="boxTop">
			<label style="color:#8cca1e;font-weight:bold;">Create New Album</label>
			<div class="spacer"></div>
		</div>
		<div class="boxBottom">	 
			<form id="createAlbum" action="createAlbum.action" method="POST" type="text">
				<input type="text" size="15" name="albumName">				
				<input type="submit" id="createAlbum" value="Create">
			</form>
		</div>	
	</div>
	</br>
	<div class="box">
		<div class="boxTop">
			<label style="color:#8cca1e;font-weight:bold;">Album</label>
			<label style="color:#8cca1e;cursor:pointer;" id="albumDelete">[Delete]</label>
			<label style="color:#8cca1e;cursor:pointer;" id="albumUpdate">[Update]</label>			
		</div>
		<div class="boxBottom">
			<div style="height: 270px;" id="album"></div>
		</div>
	</div>
	</div>
	</div>	
</div>      
</body>
</html>